/* eslint-disable no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, {useState, useEffect} from 'react'
import {connect, useHistory} from 'umi'
import {Row, Col, Avatar, Card, Carousel, Button, Spin} from 'antd'
// import { BellOutlined, BlockOutlined, CarOutlined, ContainerOutlined, DashboardOutlined, ExceptionOutlined, FileDoneOutlined, InsuranceOutlined, RobotOutlined, RocketOutlined } from '@ant-design/icons';
import {
	getUserInfo,
	getUserCheckTask,
	getManagement,
	getUseList,
} from '@/service/personal'
import {
	userCheckTaskEnum,
	userCheckTaskArr,
	managementEnum,
	managementArr,
} from './enum'
import icon1 from './icon/1.png'
import icon2 from './icon/2.png'
import icon3 from './icon/3.png'
import icon4 from './icon/4.png'
import icon5 from './icon/5.png'
import icon6 from './icon/6.png'
import icon7 from './icon/7.png'
import icon8 from './icon/8.png'
import icon9 from './icon/9.png'
import icon10 from './icon/10.png'
import Group from './icon/Group.png'
import styles from './index.less'


const {Meta} = Card

const contentStyle: React.CSSProperties = {
	height: '320px',
	color: '#fff',
	lineHeight: '320px',
	textAlign: 'center',
	background: '#364d79',
}

function User(props: any) {
    // 以子应用嵌入，默认进入首页展示loading，避免出现闪屏，loading使用antd样式，一线同学觉得新封装的loading闪屏
    if(window.__POWERED_BY_QIANKUN__) {
        return <Spin />
    }
	// console.log(props.user, '-=-==-=-')
	// const [loading, setLoading] = useState(false);
	const [userInfo, setUserInfo] = useState<any>({})
	const [userCheckTask, setUserCheckTask] = useState<any>({})
	const [management, setManagement] = useState<any>({})
	const [useList, setUseList] = useState<any[]>([])

	const history = useHistory()

	useEffect(() => {
		// document.cookie = 'orgId=6'
		// document.cookie = 'currentMerchantId=6'
		// document.cookie = 'passportTicket=18729489649'

		/** 获取个人信息 */
		getUserInfo().then((res: any) => {
			if (res?.success) {
				setUserInfo(res.data)
			}
		})
	}, [])

	useEffect(() => {
		/** 个人中心审核任务统计 */
		getUserCheckTask().then((res: any) => {
			if (res?.success) {
				setUserCheckTask(res.data)
			}
		})
	}, [])

	useEffect(() => {
		getManagement({}).then((res: any) => {
			if (res?.data) {
				setManagement(res.data)
			}
		})
	}, [])

	useEffect(() => {
		getUseList({}).then((res: any) => {
			if (res?.data) {
				setUseList(res.data)
			}
		})
	}, [])

	const iconStyle = {fontSize: '45px', marginRight: '15px'}

	const userCheckTaskArrIcons = [
		// <ContainerOutlined style={iconStyle}/>,
		// <BlockOutlined style={iconStyle}/>,
		// <FileDoneOutlined style={iconStyle}/>
		<img src={icon1} alt={icon1} style={iconStyle} />,
		<img src={icon2} alt={icon2} style={iconStyle} />,
		<img src={icon3} alt={icon3} style={iconStyle} />,
	]

	const managementArrIcons = [
		// <InsuranceOutlined style={iconStyle}/>,
		// <RobotOutlined style={iconStyle}/>,
		// <RocketOutlined style={iconStyle}/>,
		// <CarOutlined style={iconStyle}/>,
		// <ExceptionOutlined style={iconStyle}/>,
		// <BellOutlined style={iconStyle}/>,
		// <DashboardOutlined style={iconStyle}/>
		<img src={icon4} alt={icon4} style={iconStyle} />,
		<img src={icon5} alt={icon5} style={iconStyle} />,
		<img src={icon6} alt={icon6} style={iconStyle} />,
		<img src={icon7} alt={icon7} style={iconStyle} />,
		<img src={icon8} alt={icon8} style={iconStyle} />,
		<img src={icon9} alt={icon9} style={iconStyle} />,
		<img src={icon10} alt={icon10} style={iconStyle} />,
	]

	const dot = (
		<div
			style={{
				width: '14px',
				height: '14px',
				borderRadius: '50%',
				background: '@primary-color',
				marginTop: '7px',
				marginRight: '7px',
			}}>
			{}
		</div>
	)

	return (
		<div className={styles.user}>
			<Row>
				<Col span={12}>
					<Card style={{width: '98%'}}>
						<Meta
							avatar={<Avatar size={45} src={Group} />}
							// title="Card title"
							description={
								<div>
									<Row>
										<Col
											style={{
												fontSize: '20px',
												fontWeight: '600',
												marginTop: '-8px',
												marginBottom: '8px',
											}}>{`${
											userInfo?.userName || ''
										} 您好，欢迎登录`}</Col>
									</Row>
									<Row
										style={{fontSize: '14px'}}
										className={styles.wrap}>
										<Col span={7}>{`用户角色：${
											userInfo?.role || ''
										}`}</Col>
										<Col span={10}>{`所属主体：${
											userInfo?.subject || ''
										}`}</Col>
										<Col span={7}>{`所属部门：${
											userInfo?.dept || ''
										}`}</Col>
									</Row>
								</div>
							}
						/>
					</Card>

					<Card
						title={
							<Row>
								<Col>{dot}</Col>
								<Col>审核任务</Col>
							</Row>
						}
						style={{width: '98%', marginTop: '15px'}}>
						<Row>
							{userCheckTaskArr.map(
								(
									item: keyof typeof userCheckTaskEnum,
									index: number,
								) => (
									<Col span={8}>
										<Card
											hoverable
											style={{
												width: '80%',
												marginTop: '5px',
											}}
											onClick={() => {
												if (item === '待我审核') {
													history.push({
														pathname:
															'/user/approvalPending',
													})
												} else {
													history.push({
														pathname:
															'/user/approvalAlready',
													})
												}
											}}>
											<div style={{display: 'flex'}}>
												{userCheckTaskArrIcons[index]}
												<Meta
													title={item}
													description={
														<div
															style={{
																textAlign:
																	'center',
															}}>
															{userCheckTask[
																userCheckTaskEnum[
																	item
																]
															] || '0'}
														</div>
													}
												/>
											</div>
										</Card>
									</Col>
								),
							)}
						</Row>
					</Card>

					<Card
						title={
							<Row>
								<Col>{dot}</Col>
								<Col>风控预览</Col>
							</Row>
						}
						style={{width: '98%', marginTop: '15px'}}>
						<Row>
							{managementArr.map(
								(
									item: keyof typeof managementEnum,
									index: number,
								) => (
									<Col span={8}>
										<Card
											hoverable
											style={{
												width: '80%',
												marginTop: '25px',
											}}>
											<div style={{display: 'flex'}}>
												{managementArrIcons[index]}
												<Meta
													title={item}
													description={
														<div
															style={{
																textAlign:
																	'center',
															}}>
															{
																management[
																	managementEnum[
																		item
																	]
																]
															}
														</div>
													}
												/>
											</div>
										</Card>
									</Col>
								),
							)}
						</Row>
					</Card>
				</Col>
				<Col span={12}>
					<Card
						title={
							<Row>
								<Col>{dot}</Col>
								<Col>使用指南</Col>
							</Row>
						}
						extra={
							<Button
								type="link"
								onClick={() => {
									history.push({
										pathname: '/user/operatingGuide',
										search: 'test=22222',
									})
								}}>
								{'更多>>'}
							</Button>
						}
						style={{width: '100%'}}>
						<Carousel autoplay>
							<div>
								<img
									style={{height: '350px', width: '100%'}}
									alt=""
									src="https://ts1.cn.mm.bing.net/th/id/R-C.15e970cd0765096178a6da16993cfbb1?rik=IT5KfevidZcTig&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1210%2f22%2fc0%2f14558824_1350879506501.jpg&ehk=X9ro%2fg%2fGTmsglVrbV%2bmy8c3wsAvcHseqcEhsf80RMWA%3d&risl=&pid=ImgRaw&r=0"
								/>
							</div>
							<div>
								<img
									style={{height: '350px', width: '100%'}}
									alt=""
									src="https://ts1.cn.mm.bing.net/th/id/R-C.c9e611c065ddd6a6150f8ca95de4e287?rik=Mk1UA3trryTZGw&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fb%2fce%2faaea85ff77.jpg&ehk=iBupGHzd7vB3ku%2fTencscU0kur62k2H1etO2U%2f1sNIg%3d&risl=&pid=ImgRaw&r=0"
								/>
							</div>
							<div>
								<img
									style={{height: '350px', width: '100%'}}
									alt=""
									src="https://ts1.cn.mm.bing.net/th/id/R-C.3e42ad7c7744a7a612bfbaa480405611?rik=eX46Dun%2fFF1aDg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f25%2f6125.jpg&ehk=ukEQFHgNgClnZxjkosi%2bP3OoaZicxvcitCFcgJISxww%3d&risl=&pid=ImgRaw&r=0"
								/>
							</div>
							<div>
								<img
									style={{height: '350px', width: '100%'}}
									alt=""
									src="https://ts1.cn.mm.bing.net/th/id/R-C.5c53fb9d074c6e35302bca533c0204e5?rik=AYOvGEn5S6VPcw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1301%2f10%2fc1%2f17280208_1357799853569.jpg&ehk=ckgBYNfHbwaEcgpJjb%2f7E%2bfYjy74F8b81gJaf5cBpic%3d&risl=&pid=ImgRaw&r=0"
								/>
							</div>
						</Carousel>
						<div style={{color: '#333333', marginTop: '30px'}}>
							AMC系统操作手册
						</div>
					</Card>

					<Card
						title={
							<Row>
								<Col>{dot}</Col>
								<Col>快捷入口</Col>
							</Row>
						}
						style={{width: '100%', marginTop: '15px'}}>
						<Row>
							{[
								'新增/查看采购申请',
								'新增/查看采购计划',
								'新增/查看/编辑付款申请',
								'新增合同',
								'新增车辆',
								'违章查询',
								'违章查询',
								'新增年检',
								'新增保养',
							].map((item) => (
								<Col span={8}>
									<Button
										style={{
											width: '90%',
											marginTop: '15px',
										}}>
										{item}
									</Button>
								</Col>
							))}
						</Row>
					</Card>
				</Col>
			</Row>
		</div>
	)
}

export default connect(({user}: any) => ({user}))(User)
